<template>
  <page-view class="movie">
    <m-header>猫眼电影</m-header>
    <div class="topNavDiv">
      <div class="pos_div">
        武汉
        <span class="iconfont icon-icon_sanjiaoxing"></span>
      </div>
      <ul class="topNav">
        <li :class="[pageType==0?'active':null]" @click="pageType=0">正在热映</li>
        <li :class="[pageType==1?'active':null]" @click="pageType=1">即将上映</li>
      </ul>
      <div class="searchDiv">
        <span class="iconfont icon-chaxun"></span>
      </div>
    </div>
    <div style="display:flex;background-color:#ececec">
      <div class="pos_div"></div>
      <div class="topNavBar">
        <div :class="[pageType==1?'active':null]"></div>
      </div>
      <div class="searchDiv"></div>
    </div>
    <div class="content">
      <swiper :options="swiperOption" ref="mySwiper" class="movieSwiper">
        <swiper-slide class="swiperSlide">
          <hot></hot>
        </swiper-slide>
        <swiper-slide class="swiperSlide">
          <coming></coming>
        </swiper-slide>
      </swiper>
    </div>
  </page-view>
</template>
<script>
import MHeader from "../components/MHeader.vue";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import Hot from "../components/Hot.vue";
import Coming from "../components/Coming.vue";
export default {
  name: "Movie",
  data() {
    return {
      pageType: 0
    };
  },
  //观察属性  监听属性
  watch: {
    //当pageType发生改变的时候，我下面的轮播也要改变
    pageType(newValue) {
      this.swiper.slideTo(newValue);
    }
  },
  computed: {
    swiperOption() {
      var that = this; //这个地方拿到vue的对象
      return {
        on: {
          slideChange() {
            that.pageType = this.activeIndex;
          }
        }
      };
    },
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  components: {
    MHeader,
    swiper,
    swiperSlide,
    Hot,
    Coming
  }
};
</script>
<style lang="scss" scoped>
.movie {
  display: flex;
  flex-direction: column;
  overflow: auto;
  .topNavDiv {
    display: flex;

    .topNav {
      flex: 1;
      margin: 0;
      padding: 0;
      display: flex;
      list-style-type: none;
      height: 0.76rem;
      > li {
        height: 100%;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        &.active {
          color: #e54847;
        }
      }
    }
  }
  .topNavBar {
    height: 2px;
    background-color: #ececec;
    flex: 1;
    > div {
      width: 50%;
      height: 100%;
      background-color: #e54847;
      transition: all 0.2s linear;
      &.active {
        transform: translateX(100%);
      }
    }
  }
  .content {
    flex: 1;
    overflow: auto;
    .movieSwiper {
      height: 100%;
      .swiperSlide {
        height: 100%;
        overflow: auto;
      }
    }
  }
}
.pos_div {
  width: 1.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.searchDiv {
  @extend .pos_div;
  .iconfont {
    font-size: 0.44rem;
    color: #e54847;
  }
}
</style>